<template>
  <view class="join">
    <view class="top">
      <image src="/static/时间.png"></image>
    </view>
    <view class="time">
      <uv-count-down
        :time="30 * 60 * 60 * 1000"
        format="DD:HH:mm:ss"
        autoStart
        millisecond
        @change="onChange"
        customStyle="color:#fc4424"
      >
        <view class="time1">
          <text class="time__item"
            >{{
              timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
            }}:</text
          >
          <text class="time__item">{{ timeData.minutes }}:</text>
          <text class="time__item">{{ timeData.seconds }}</text>
        </view>
      </uv-count-down>
    </view>
    <view class="content"> 还差<text>1</text>人，赶快邀请好友来拼单 </view>
    <view class="btn">
      <button class="btn1">邀请好友拼单</button>
      <button class="btn1 btn2">去首页逛逛</button>
    </view>
    <view class="avatar">
      <uv-avatar
        src="/static/1.jpg"
        customStyle="border:2px solid #d06552"
      ></uv-avatar>
      <uv-avatar text="?" customStyle="margin-left:20rpx"></uv-avatar>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timeData: {}
    };
  },
  methods: {
    onChange(e) {
      this.timeData = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.join {
  width: 80%;
  margin: auto;
  text-align: center;
  .top {
    margin-top: 80rpx;
    image {
      height: 80rpx;
      width: 80rpx;
    }
  }
  .time {
    margin-top: 20rpx;
  }
  .content {
    margin-top: 40rpx;
    color: #373737;
    font-weight: bold;
    text {
      color: #fd5d41;
    }
  }
  .btn {
    margin-top: 40rpx;
    .btn1 {
      background-color: #fc4424;
      border: 1px solid #fc4424;
      margin-top: 20rpx;
      color: #fff;
    }
    .btn2 {
      background-color: #fff;
      color: #f76045;
    }
  }
  .avatar {
    display: flex;
    // text-align: center;
    width: 30%;
    margin: auto;
    margin-top: 40rpx;
  }
}
</style>
